<template>
  <div>
    <a-page-header
      style="border: 1px solid rgb(235, 237, 240)"
      title="小程序详情"
      :ghost="false"
      @back="() => $router.go(-1)"
    ></a-page-header>

    <page-header-wrapper>
      <a-card :bordered="false">
        <a-tabs v-model="tabs">
          <a-tab-pane key="1" tab="基础信息"></a-tab-pane>
          <a-tab-pane v-if="isShow" key="2" tab="签约当面付"></a-tab-pane>
          <a-tab-pane v-if="isShow" key="4" tab="签约商家分账"></a-tab-pane>
          <a-tab-pane v-if="isShow" key="3" tab="蚂蚁门店"></a-tab-pane>
        </a-tabs>

        <template v-if="!isShow">
          <a-alert
            v-if="data && data.mini_status !== 1"
            :message="data.mini_status === -1 ? '超时未确认或已拒绝' : '等待商户人脸识别'"
            banner
            style="margin-bottom: 20px"
          />

          <div class="title">申请资料填写</div>

          <a-form-model
            ref="alipayForm"
            :model="alipayForm"
            :rules="alipayRules"
            :label-col="{ span: 3 }"
            :wrapper-col="{ span: 11 }"
          >
            <a-form-model-item label="公司营业执照" prop="license_pic">
              <cyyUploadImg
                @uploadSuccess="(e) => choosePic(e, 'alipay')"
                @deleteImg="alipayForm.license_pic = ''"
                :imgSrc="alipayForm.license_pic"
              >
              </cyyUploadImg>
            </a-form-model-item>
            <a-form-model-item label="小程序名称" prop="app_name">
              <a-input :disabled="disabled" v-model="alipayForm.app_name" placeholder="请输入小程序名称" />
            </a-form-model-item>
            <a-form-model-item label="支付宝账户" prop="alipay_account">
              <a-input :disabled="disabled" v-model="alipayForm.alipay_account" placeholder="请输入支付宝账户" />
              <div class="tip">用户提交申请后需要到支付宝信息中心确认申请信息。</div>
            </a-form-model-item>
            <a-form-model-item label="法人姓名" prop="legal_personal_name">
              <a-input :disabled="disabled" v-model="alipayForm.legal_personal_name" placeholder="请输入法人姓名" />
            </a-form-model-item>
            <a-form-model-item label="企业名称" prop="license_name">
              <a-input :disabled="disabled" v-model="alipayForm.license_name" placeholder="请输入企业名称" />
            </a-form-model-item>
            <a-form-model-item label="企业代码" prop="license_no">
              <a-input :disabled="disabled" v-model="alipayForm.license_no" placeholder="请输入企业代码" />
              <div class="tip">需国家统一规定的企业（单位）法人代码。</div>
            </a-form-model-item>
            <a-form-model-item label="商户电话" prop="service_phone">
              <a-input :disabled="disabled" v-model="alipayForm.service_phone" placeholder="请输入商户电话" />
            </a-form-model-item>
            <a-form-model-item label="商户姓名" prop="contact_name">
              <a-input :disabled="disabled" v-model="alipayForm.contact_name" placeholder="请输入商户姓名" />
            </a-form-model-item>
            <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
              <a-button v-if="!disabled" type="primary" @click="onSubmit"> 提交 </a-button>
              <a-button style="margin-left: 10px" @click="$router.go(-1)"> 取消 </a-button>
            </a-form-model-item>
          </a-form-model>
        </template>

        <info v-show="isShow && tabs === '1'" :data="data" @changeData="alipayInfo"></info>
        <faceBind v-show="isShow && tabs === '2'" :data="data" @changeData="alipayInfo"></faceBind>
        <shop v-show="isShow && tabs === '3'" :data="data"></shop>
        <merchantPay v-show="isShow && tabs === '4'" :id="this.$route.query.id"></merchantPay>
      </a-card>
    </page-header-wrapper>
  </div>
</template>

<script>
import { alipayRegister, alipayDetail, ocr, alipayInfo } from '@/api/setting/applet'
import { cyyUploadImg } from '@/components/CyyUi/index'
export default {
  components: {
    cyyUploadImg,
    info: () => import('./components/info'),
    faceBind: () => import('./components/faceBind'),
    shop: () => import('./components/shop'),
    merchantPay: () => import('./components/merchantPay'),
  },

  data() {
    let checkPic = (rule, value, callback) => {
      if (this.alipayForm.license_pic == '') {
        callback(new Error('请上传公司营业执照'))
      } else {
        callback()
      }
    }

    return {
      tabs: '1',
      isShow: 0,
      disabled: false,

      data: null,

      alipayForm: {
        license_pic: '',
        alipay_account: '',
        legal_personal_name: '',
        license_name: '',
        license_no: '',
        app_name: '',
        service_phone: '',
        contact_name: '',
      },

      // 支付宝验证规则
      alipayRules: {
        license_pic: [{ validator: checkPic }],
        alipay_account: [{ required: true, message: '请输入支付宝账户', trigger: 'blur' }],
        legal_personal_name: [{ required: true, message: '请输入法人姓名', trigger: 'blur' }],
        license_name: [{ required: true, message: '请输入企业名称', trigger: 'blur' }],
        license_no: [{ required: true, message: '请输入企业代码', trigger: 'blur' }],
        app_name: [{ required: true, message: '请输入小程序名称', trigger: 'blur' }],
        service_phone: [{ required: true, message: '请输入商户电话', trigger: 'blur' }],
        contact_name: [{ required: true, message: '请输入商户姓名', trigger: 'blur' }],
      },
    }
  },
  methods: {
    // 点击提交
    onSubmit() {
      this.$refs.alipayForm.validate(async (valid) => {
        if (valid) {
          const res = await alipayRegister(this.alipayForm)
          if (res.code == 0) {
            this.$router.back()
          }
        } else {
          return false
        }
      })
    },

    // 获取注册支付宝小程序的信息
    async alipayDetail(id) {
      const res = await alipayDetail({ id })
      if (res.code == 0) {
        this.alipayForm = res.data
      }
    },

    // 选中职业执照照片
    choosePic(e, type) {
      if (type == 'alipay') {
        this.alipayForm.license_pic = e.data
      }
      this.analysis(e.data, type)
    },

    // 解析营业执照
    async analysis(url, type) {
      const res = await ocr({ url, type: 1 })
      if (res.code == 0) {
        this.alipayForm.legal_personal_name = res.data.person
        this.alipayForm.license_name = res.data.name
        this.alipayForm.license_no = res.data.reg_num
      }
      if (res.code == -1) {
        return
      }
    },

    async alipayInfo() {
      let { id } = this.$route.query,
        res = await alipayInfo({
          id,
        })

      if (!res.code) {
        let { mini_status } = res.data

        this.data = res.data

        switch (mini_status) {
          case 0:
            this.disabled = true
            break

          case 1:
            this.isShow = true
            break
        }
      }
    },
  },

  async mounted() {
    if (this.$route.query.id) {
      let { id } = this.$route.query
      this.alipayInfo()
      this.alipayDetail(id)
    }
  },
}
</script>

<style lang="less" scoped>
.title {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.85);
  margin-bottom: 14px;
}
.tip {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.45);
  line-height: normal;
}
</style>
